var $api = require('../../utils/api.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasShow: false,
    qrCode: null,
    imagePath: '',
  },

  preview: function () {
    wx.previewImage({
      current: this.data.imagePath, // 当前显示图片的http链接
      urls: [this.data.imagePath] // 需要预览的图片http链接列表
    })
  },
  draw: function(e) {
    const ctx = wx.createCanvasContext('myCanvas')
        ctx.setFillStyle('#ffffff')
        ctx.fillRect(0, 0, 375, 600)
        const self = this
        wx.downloadFile({
          url: 'https://a.zhsoch.com/uploads/20210119/a1d42e2b887e05de9d5521f99e9b6c92.jpg',
          success: function (res) {
            ctx.drawImage(res.tempFilePath, 0, 0, 375, 465)
            self.drawUserAvatar(ctx)
            self.drawUserName(ctx)
            // self.saveImage()
            // self.createImage();
          },
          fail:function(err){
        
          }
        })
  },
  
  drawUserAvatar :function(ctx){
    let userInfo = wx.getStorageSync('userInfo');
    const self = this
    wx.downloadFile({
      url: userInfo.avatar,
      success: function (res) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(60, 500, 25, 0, 2*Math.PI, false);
        ctx.clip();
        ctx.drawImage(res.tempFilePath, 35, 476, 50, 50)
        ctx.restore()
        
        self.drawQrcode(ctx)
      },
      fail:function(err){
    
      }
    })
  },
  drawUserName(ctx) {
    let userInfo = wx.getStorageSync('userInfo');
    ctx.setFillStyle('#333333')
    ctx.setFontSize(16)
    const nickname = userInfo.nickname;
    ctx.fillText(nickname, 93, 496)
    ctx.setFontSize(12)
    ctx.fillText('邀请你进入挚搜车', 93, 520)
  },
  drawQrcode(ctx) {
    const self = this
    wx.downloadFile({
      url: self.data.qrCode,
      success: function(res) {
        if (res.statusCode == 200) {
          ctx.drawImage(res.tempFilePath, 250, 472, 100, 100)
          ctx.draw()

          self.setData({'canvasShow' : true});
        }
      }
    })
  },
  createImage () {
    var self = this;
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,
      height: 600,
      destWidth: 375*10,
      destHeight: 600*10,
      fileType: 'jpg',
      quality: 1,
      canvasId: 'myCanvas',
      success: function(res) {
        // self.showCanvas = false;
        console.log(res);
        self.setData({'imagePath' : res.tempFilePath})
        // self.imagePath = res.tempFilePath;
      },
      fail(err){
        console.log('err',err)
      } 
    })
  },
  saveImage(){
    const self = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 375,
      height: 600,
      destWidth: 375*10,
      destHeight: 600*10,
      fileType: 'jpg',
      quality: 1,
      canvasId: 'myCanvas',
      success: function(res) {
        self.showCanvas = false
        wx.authorize({
          scope: 'scope.writePhotosAlbum',
          success() {
            wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success(res) {
                  wx.showToast({
                    title: '已保存',
                    icon: 'success',
                    duration: 2000
                  })
                },
                // fail(err){
                //   wx.showToast({
                //     title: err.errMsg,
                //     icon: 'none',
                //     duration: 2000
                //   })
                // }
            })
          },fail(error) {
            wx.showToast({
              title: '请先授权',
              icon: 'error',
              duration: 2000
            })
          }
        })
      },
      fail(err){
        console.log('err',err)
      } 
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    $api.userShare().then(res => {
      if(res.code==1){
        this.setData({
          qrCode: res.data
        })
        this.draw();
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // this.draw();
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})